<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>点名器</title>
  <style>
    html,
    body,
    p {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    .btn {
      width: 100px;
      height: 100px;
      margin-top: 20px;
      margin-left: 20px;
      border-radius: 100px;
      font-size: 20px;
      background-color: yellow;
    }

    .result {
      margin-top: 20px;
      width: 80%;
      margin: 0 auto;

      text-align: center;
      height: 50px;
      line-height: 50px;
      background-color: lightcyan;
      font-size: 30px;
    }

    .container {
      width: 80%;
      margin: 20px auto;
      padding: 20px;
      border: 1px solid black;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }

    .container .item {
      margin: 10px;
      border: 4px solid black;
      border-radius: 4%;
      text-align: center;
    }

    .container .active {
      border: 4px solid red;
    }

    .container .item img {
      width: 100px;
      height: 100px;
    }
  </style>
</head>

<body>
  <div id="wrap">
    <button class="btn">START</button>
    <div class="result">
      <span>小明</span>
    </div>
    <div class="container">
      <div class="item">
        <img src="./images/01.jpg" alt=".." />
        <p>司马懿</p>
      </div>
    </div>
  </div>
  <script>
    let heroes = [
      { id: 100001, heroPortrait: '01.jpg', heroName: '司马懿' },
      { id: 100002, heroPortrait: '02.jpg', heroName: '女娲' },
      { id: 100003, heroPortrait: '03.jpg', heroName: '百里守约' },
      { id: 100004, heroPortrait: '04.jpg', heroName: '项羽' },
      { id: 100005, heroPortrait: '05.jpg', heroName: '虞姬' },
      { id: 100006, heroPortrait: '06.jpg', heroName: '张良' },
      { id: 100007, heroPortrait: '07.jpg', heroName: '安其拉' },
      { id: 100008, heroPortrait: '08.jpg', heroName: '李白' },
      { id: 100009, heroPortrait: '09.jpg', heroName: '阿珂' },
      { id: 100010, heroPortrait: '10.jpg', heroName: '墨子' },
      { id: 100011, heroPortrait: '11.jpg', heroName: '鲁班' },
      { id: 100012, heroPortrait: '12.jpg', heroName: '嬴政' },
      { id: 100013, heroPortrait: '13.jpg', heroName: '孙膑' },
      { id: 100014, heroPortrait: '14.jpg', heroName: '周瑜' },
      { id: 100015, heroPortrait: '15.jpg', heroName: '老夫子' },
      { id: 100016, heroPortrait: '16.jpg', heroName: '狄仁杰' },
      { id: 100017, heroPortrait: '17.jpg', heroName: '扁鹊' },
      { id: 100018, heroPortrait: '18.jpg', heroName: '马可波罗' },
      { id: 100019, heroPortrait: '19.jpg', heroName: '露娜' },
      { id: 100020, heroPortrait: '20.jpg', heroName: '孙悟空' },
      { id: 100021, heroPortrait: '21.jpg', heroName: '黄忠' },
      { id: 100022, heroPortrait: '22.jpg', heroName: '百里玄策' },
    ]
    function render() {
      document.querySelector('.container').innerHTML = ''
      const newArr = heroes.map(ele => {
        return `
        <div class="item">
          <img src="./images/${ele.heroPortrait}" alt=".." />
          <p>${ele.heroName}</p>
        </div>`
      })
      document.querySelector('.container').innerHTML = newArr.join('')
    }
    render()
    let flag = true
    let timer = 0
    let heroesname = ''
    document.querySelector('.btn').addEventListener('click', function () {
      if (flag) {
        this.innerHTML = 'END'
        // clearInterval(timer)
        flag = false
        timer = setInterval(function () {
          // 随机数
          const random = parseInt(Math.random() * heroes.length)
          console.log(random);
          // document.querySelector('span').innerHTML = data[random]
          document.querySelector(`.container .item:nth-child(${random + 1})`).className = 'item'
          heroesname = heroes[random].heroName
        }, 500)
      } else {
        this.innerHTML = 'START'
        flag = true
        clearInterval(timer)
        document.querySelector('.result span').innerHTML = heroesname
      }
    })
  </script>
</body>

</html>